<template>
  <KView class="remind-page">
    <page-header title="今日提醒" @back-click="toBack"></page-header>
    <KView class="remind-page-line"></KView>

    <KView class="remind-page-content" v-if="isShow">
      <template v-if="noticeList.length>0">
        <KView>
          <remind-item v-for="notice in noticeList" :key="notice.key" :notice="notice" @detail="lookDetail"></remind-item>
        </KView>
        <KView class="remind-page-more" v-if="loading||pagination.hasNextPage()">
          <sys-loading v-if="loading" :size="60"></sys-loading>
          <KView v-else-if="pagination.hasNextPage()" class="remind-page-btn" @click="lookMore">查看更多</KView>
        </KView>
        <KView v-else class="remind-page-null"></KView>
      </template>
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import PageHeader from 'common/pageHeader';
  import SysLoading from 'common/sysLoading';
  import RemindItem from './remindItem';

  import Pagination from 'models/pagination';

  import HomePageApi from 'services/homePageApi';

  export default {
    data() {
      return {
        loading: false,
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        noticeList: [],
        pagination: new Pagination()
      };
    },

    created() {
      this.initData();
    },

    methods: {
      initData() {
        SystemUtil.showLoading();
        this.setNoticeList(true).then(() => {
          SystemUtil.hideLoading();
          this.isShow = true;
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      setNoticeList(isInit = false, pagination) {
        if (pagination === undefined) {
          pagination = this.pagination;
        }

        return HomePageApi.getNoticeList(pagination).then(noticeList => {
          if (isInit) {
            this.noticeList = noticeList;
          } else {
            this.noticeList.push(...noticeList);
          }
          return noticeList;
        });
      },

      lookMore() {
        if (this.loading) {
          return;
        }

        let pagination = this.pagination;
        if (!pagination.hasNextPage()) {
          return;
        }

        pagination.nextPage();
        this.loading = true;
        this.setNoticeList().then(() => {
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      lookDetail(notice) {
        if (!notice.isLook) {
          HomePageApi.toLookNotice(notice.id).then(() => {
            notice.isLook = true;
          });
        }

        let url;
        let tipUrl = notice.tipUrl;
        if (tipUrl === '') {
          url = `/remindPageDetail/${notice.id}`;
        } else {
          if (tipUrl.startsWith('http://') || tipUrl.startsWith('https://')) {
            url = `/htmlPage?url=${tipUrl}`;
          } else {
            url = tipUrl;
          }
        }

        if (this.isMiniprogram) {
          window.open(url);
        }
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }
        wx.navigateBack();
      }
    },

    components: {
      PageHeader,
      SysLoading,
      RemindItem
    }
  };

</script>

<style lang="scss">
  .remind-page {
    height: 100%;

    .page-header {
      margin-bottom: formatPx(20);
    }

    .remind-page-line {
      height: 1px;
      background: #DADADA;
    }

    .remind-page-content {
      margin-top: formatPx(40);
      height: calc(100% - #{formatPx(135)});
      padding: 0 formatPx(30);
      overflow: auto;

      .remind-page-item {
        margin-bottom: formatPx(20);

        &:last-child {
          margin-bottom: 0;
        }
      }

      .remind-page-more {
        position: relative;
        padding: formatPx(50) 0;
        height: formatPx(66);

        .remind-page-btn {
          text-align: center;
          width: formatPx(255);
          height: 100%;
          line-height: formatPx(65);
          border: 1px solid #999999;
          font-size: formatPx(30);
          margin: auto;
          border-radius: formatPx(33);
        }
      }

      .remind-page-null {
        height: formatPx(40);
      }
    }
  }

</style>
